<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .text {
        font-size: 8px;
      }
      td {
        height: 50px;
        width: 40px;
        background-color: #ccc;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }
      .is-select {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table class="table">
      <tr>
        <td type="top" name="zs" age="11"></td>
        <td type="top" name="ls" age="22"></td>
        <td type="top" name="ww" age="33"></td>
        <td type="top" name="zl" age="44"></td>
        <td type="top" name="sq" age="55"></td>
        <td type="top" name="lb" age="66"></td>
      </tr>
      <tr>
        <td type="bottom"></td>
        <td type="bottom"></td>
        <td type="bottom"></td>
        <td type="bottom"></td>
        <td type="bottom"></td>
        <td type="bottom"></td>
      </tr>
    </table>
    <script>
      let arr = [];
      let flag = false;
      let tds = document.querySelectorAll("td");
      let initIndex = 1;
      let startIndex = -1;
      let endIndex = -1;
      let dom = null;
      let type = "";
      arr.map.call(tds, (val, index) => {
        val.onmousedown = function () {
          let params = {
            name: "",
            age: "",
          };
          params.name = val.getAttribute("name");
          params.age = val.getAttribute("age");
          arr.push(params);
          val.className = "is-select";
          flag = true;
          val.setAttribute("index", initIndex);
          type = val.getAttribute("type");
        };
        val.onmouseenter = function (e) {
          if (e.stopPropagation) e.stopPropagation();
          if (e.preventDefault) e.preventDefault();
          let currenttype = val.getAttribute("type");
          let currentIndex = val.getAttribute("index");
          let params = {
            name: "",
            age: "",
          };

          if (currentIndex && currentIndex < endIndex && currenttype === type) {
            dom.className = "";
            dom.removeAttribute("index");
            arr = arr.filter((val) => val.age != dom.getAttribute("age"));
            initIndex = currentIndex * 1;
          } else if (flag && currenttype === type) {
            val.className = "is-select";
            initIndex = initIndex + 1;
            val.setAttribute("index", initIndex);
            params.name = val.getAttribute("name");
            params.age = val.getAttribute("age");
            if (arr.findIndex((val) => val.age === params.age) === -1) {
              arr.push(params);
            }
          }
          console.log(arr);
        };
        val.onmouseleave = function (e) {
          if (e.stopPropagation) e.stopPropagation();
          if (e.preventDefault) e.preventDefault();
          let currenttype = val.getAttribute("type");
          let currentIndex = val.getAttribute("index");
          if (type === currenttype) {
            endIndex = currentIndex;
            dom = val;
          }
        };
      });
      window.onmouseup = function () {
        flag = false;
        arr = [];
        arr.map.call(tds, (val) => {
          val.className = "";
          val.removeAttribute("index");
          initIndex = 1;
        });
      };
    </script>
  </body>
</html>
